<style lang="less">
.vertical-center-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 700px;

    .ivu-modal {
        top: 0;
    }
}
</style>
<template>
    <Modal
        :styles="styles"
        v-model="drawer.show"
        :title="drawer.type === 'edit' ?lang.edit : drawer.type === 'new' ? lang.new: lang.detail"
        width="1024"
        class-name="vertical-center-modal"
        :transfer="false"
        :before-close="handleCloseEdit">
        <span slot="header"
              :style="form.titleStyle">{{
                drawer.type === 'edit' ? lang.edit : drawer.type === 'new' ? lang.new : lang.detail
            }}</span>
        <div style="min-height: 820px; height:820px;overflow-y: auto;overflow-x:hidden;margin: 10px;">
            <Form ref="_frm" :model="cloneData" :disabled="drawer.type === 'read'" :rules="ruleValidate"
                  :label-width="labelWidth" :label-position="labelPosition">
                <Row :gutter="32">
                    <Col span="12">
                        <FormItem prop="type" :label="lang.type">
                            <Select style="grid-area: b2" v-model="cloneData.type" transfer :clearable="false" :disabled="drawer.type === 'edit'">
                                <Option v-for="item in typeList" :key="item.label" :value="item.value">{{
                                        item.label
                                    }}
                                </Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem prop="className" :label="lang.className">
                            <Input v-model="cloneData.className" :placeholder="lang.classNamePlaceholder" :disabled="drawer.type === 'edit'"
                                   maxlength="50"/>
                        </FormItem>
                    </Col>
                </Row>
<!--                <Row :gutter="32">-->
<!--                    <Col span="12">-->
<!--                        <FormItem prop="version" :label="lang.version">-->
<!--                            <Input v-model="cloneData.version" clearable :placeholder="lang.versionPlaceholder"/>-->
<!--                        </FormItem>-->
<!--                    </Col>-->
<!--                    <Col span="12">-->
<!--                        <FormItem prop="published" :label="lang.published">-->
<!--                          <Checkbox v-model="cloneData.published"></Checkbox>-->
<!--                        </FormItem>-->
<!--                    </Col>-->
<!--                </Row>-->
                <Row :gutter="32">
                    <Col span="24">
                        <FormItem prop="comments" :label="lang.comments">
                            <Input v-model="cloneData.comments" clearable :placeholder="lang.commentsPlaceholder"
                                   type="textarea" :autosize="{minRows: 2,maxRows: 5}"/>
                        </FormItem>
                    </Col>
                </Row>
                <Row :gutter="32">
                    <Col span="24">
                        <Alert>{{ lang.modelProperties }}</Alert>
                        <features ref="_features" :modelData="data"></features>
                    </Col>
                </Row>
            </Form>
        </div>
        <div slot="footer">
            <Button v-if="drawer.type === 'edit'|| drawer.type === 'new'" type="primary" @click="handleDataSubmit"
                    :loading="loading">{{ lang.submit }}
            </Button>
        </div>
    </Modal>
</template>
<script>
import {cloneDeep} from "lodash";
import features from "./cfg-features";

export default {
    name: "model-editor",
    components: {features},
    data() {
        return {
            styles: {},
            cloneData: {},
            features: [],
            general: {
                status: {type: 'Boolean', defaultValue: false},
                name: {type: 'string', defaultValue: ""},
            },
            propInfo: {},
            values: {}
        }
    },
    props: {
        form: {
            default: () => {
                return {}
            }
        },
        data: {
            default: () => {
                return {}
            }
        },
        loading: {
            default: () => {
                return false;
            }
        },
        drawer: {
            default: () => {
                return {
                    show: false,
                    type: 'read', // edit || read || new
                };
            }
        },
        modelType: {
            default: () => {
                return "entity"
            }
        },
    },
    computed: {
        labelWidth() {
            return 100;
        },
        labelPosition() {
            return 'right';
        },
        lang() {
            return {
                "en-US": {
                    edit: 'edit',
                    new: 'new',
                    detail: 'detail',
                    action: 'action',
                    submit: 'submit',
                    type: 'type',
                    typePlaceholder: 'Please select type',
                    className: 'className',
                    classNamePlaceholder: 'Please enter class name',
                    version: 'version',
                    versionPlaceholder: 'Please enter version',
                    published: 'published',
                    comments: 'comments',
                    commentsPlaceholder: 'Please enter comments',
                    modelProperties: 'Model Attribute Configuration',
                    typeRuleMsg: 'Please select property type',
                    classNameRuleMsg: 'Please enter class name'
                },
                "zh-CN": {
                    edit: '编辑',
                    new: '添加',
                    detail: '查看',
                    action: '操作',
                    submit: '提交',
                    type: '所属类型',
                    typePlaceholder: '请选择所属类型',
                    className: '模型类名',
                    classNamePlaceholder: '请输入模型类名',
                    version: '版本号',
                    versionPlaceholder: '请输入版本号',
                    published: '是否发布',
                    comments: '说明',
                    commentsPlaceholder: '请输入描述信息',
                    modelProperties: '模型属性配置',
                    typeRuleMsg: '请选择所属类型',
                    classNameRuleMsg: '请输入模型类名'
                },
            }[this.G_Locale]
        },
        typeList() {
            return this.$modelObject.getModelType(this.modelType)
        },
        ruleValidate() {
            return {
                type: [
                    {required: true, message: this.lang.typeRuleMsg, trigger: 'blur'}
                ],
                className: [
                    {required: true, message: this.lang.classNameRuleMsg, trigger: 'blur'}
                ],
            }
        }
    },
    mounted() {
        this.cloneData = cloneDeep(this.data)
    },
    methods: {
        /**
         * 提交添加或修改数据
         */
        handleDataSubmit() {
            this.$refs._frm.validate(valid => {
                if (valid) {
                    let features = this.$refs._features.getFeatures();
                    let values = this.$refs._features.getValues();
                    this.$set(this.cloneData, 'values', values);
                    this.$set(this.cloneData, 'features', features);
                    this.$emit('dataSubmit', this.cloneData, this.drawer.type);
                }
            });
        },
        /**
         * 关闭窗口
         */
        handleCloseEdit() {
            this.drawer.show = false
            this.$emit('closeEdit');
        }
    }
}
</script>
